<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue -->
    <script src="./js/vue.js"></script>
    <!-- 引入elementui -->
    <link rel="stylesheet" href="./element-ui/css/index.css">
    <script src="./element-ui/js/index.js"></script>
    <!-- 引入indexcss -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入fontcss -->
    <link rel="stylesheet" href="./css/stepbar/font_4541693_8gzfpmobeyl/iconfont.css">
</head>

<body>
    <div id="app">
        <div class="step">
            <el-steps simple :active="active" style="height: 60px;font-size: 25px;">
                <el-step>
                    <div slot="title">
                        <span class="iconfont icon-icon-test2"></span>
                        <span class="text">确认账户</span>
                    </div>
                </el-step>
                <el-step>
                    <div slot="title">
                        <span class="iconfont icon-icon-test"></span>
                        <span class="text">重置密码</span>
                    </div>
                </el-step>
                <el-step>
                    <div slot="title">
                        <span class="iconfont icon-icon-test1"></span>
                        <span class="text">完成</span>
                    </div>
                </el-step>
            </el-steps>
        </div>

        <div class="form" v-show="active == 0?true:false">
            <el-alert v-show="active == 0?true:false" closable="{{closable}}"
                style="width: 40%;position: absolute;top: -20%;left: 40%;transform: translateX(-50%) translateY(-50%);"
                title="为确认是你本人操作，请完成以下认证" type="warning" show-icon>
            </el-alert>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item prop="pass">
                    <div slot="label" class="name">登录用户名</div>
                    <el-input v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="phone">
                    <div slot="label" class="name">手机号码</div>
                    <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="verification">
                    <div slot="label" class="name">短信验证码</div>
                    <el-input class="verificate" v-model="ruleForm.verification" autocomplete="off"></el-input>
                    <div class="getcode">
                        <div style="width: 100%;height: 100%;" v-if="messageCodeVis" class="second-text">
                            {{countdown}}秒后重新获取</div>
                        <el-button v-else type="primary" style="width: 100%;height: 100%;" link
                            @click="sendCode">获取验证码</el-button>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button size="medium" style="margin-top: 12px;margin-left: 30px; width: 100px;" @click="next"
                        type="primary">下一步</el-button>
                    <!-- <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                </el-form-item>
            </el-form>
        </div>
        <div class="form" v-show="active == 1?true:false">
            <el-form :model="rulepassword" status-icon :rules="newrules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item prop="newpassword">
                    <!-- <div slot="label" class="name">登录用户名</div> -->
                    <el-input placeholder="请输入新密码" v-model="rulepassword.newpassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="nextnewpassword">
                    <!-- <div slot="label" class="name">手机号码</div> -->
                    <el-input placeholder="请再次输入你的新密码" v-model="rulepassword.nextnewpassword"
                        autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" style="margin-top: 12px;margin-left: 30px; width: 100px;" @click="lastStep"
                        type="primary">上一步</el-button>
                    <el-button size="medium" style="margin-top: 12px;margin-left: 30px; width: 100px;" @click="next"
                        type="primary">下一步</el-button>
                </el-form-item>
        </div>
        <div class="accomplish" v-show="active == 2?true:false">
            <div class="nav">
                <span class="iconfont icon-dui"></span>
                <div class="text">
                    <span>恭喜您修改成功！</span>
                    <span style="color: gray;font-size: 15px;">提示：系统会在2秒内跳转登录页面...</span>
                </div>
            </div>
            <div class="btn">
                <el-button size="medium" style="margin-top: 12px;margin-left: 30px; width: 300px;"
                    type="primary">直接登录</el-button></el-button>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data: function () {
            var validateUsername = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入登录用户名'));
                }
            };
            var validatePhone = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入手机号码'));
                }
            };
            var validateVerification = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入短信验证码'));
                }
            };
            var validatepassword = (rule, value, callback) => {
                // console.log(1);
                if (!value) {
                    callback(new Error('请按规则设置新密码'));
                }
            };
            var validatepassword = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请按规则设置新密码'));
                }
            };

            return {
                closable: false,
                active: 0,
                countdown: 60,
                messageCodeVis: false,
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    age: ''
                },
                rulepassword: {
                    newpassword: '',
                    nextnewpassword: ''
                },
                rules: {
                    pass: [
                        { validator: validateUsername, trigger: 'blur' }
                    ],
                    phone: [
                        { validator: validatePhone, trigger: 'blur' }
                    ],
                    verification: [
                        { validator: validateVerification, trigger: 'blur' }
                    ]
                },
                newrules: {
                    newpassword: [
                        { validator: validatepassword, trigger: 'blur' }
                    ],
                    nextnewpassword: [
                        { validator: validatePhone, trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            next() {
                if (this.active++ > 2) this.active = 0;
            },
            lastStep() {
                if (this.active-- < 0) this.active = 0;
            },
            sendCode() {
                // const reg = /^1[3456789]\d{9}$/;
                // if (!reg.test(ruleForm.pass)) return ElMessage.error('手机号不正确！')
                // if (!form.value.phone) return ElMessage.error('请输入手机号码')
                this.messageCodeVis = !this.messageCodeVis
                this.startCountdown()
            },
            startCountdown() {
                let that = this
                const intervalId = setInterval(() => {
                    let countdown = that.countdown
                    if (countdown > 0) {
                        console.log(countdown);
                        countdown--;
                        that.countdown = countdown;
                    } else {
                        clearInterval(intervalId)
                        messageCodeVis.value = false
                    }
                }, 1000)
            }
        }
    })
</script>